<template>
  <div class="container">
    <div class="backtype">
      <div class="steps">
        <div v-for="(item, i) in stepTitle" class="step_line" :class="{ success: active >= i }">
          <span class="step_line_icon">
            <img v-if="active > i" src="/src/assets/image/success.svg" />
            <i v-else>{{ i + 1 }}</i>
          </span>
          <span>
            {{ item }}
          </span>
        </div>
      </div>
    </div>
    <div class="backtype" style="margin-top: 16px">
      <AddressConfig v-show="active === 0" :resData="resData" class="backtype" :active="active" @changeActive="changeActive"></AddressConfig>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, watch } from 'vue'
  import { useRoute } from 'vue-router'
  import AddressConfig from './components/AddressConfig.vue'
  import { channelConfigInfo } from '@/api/channel/authconfig'
  const route = useRoute()
  const active = ref(0)
  const stepTitle = ['进入企业微信管理', '配置新域名及设置开启范围', '填写Secret']
  let resData = ref([
    {
      id: 1,
      title: '一、进入企业微信管理',
      text: '从【企业微信官网】进入管理后台，扫码登录平台'
    },
    {
      id: 2,
      title: '',
      text: '从营销工具中，选择消息会话存档功能'
    },
    {
      id: 3,
      title: '',
      text: '上传确认函，等待腾讯审核'
    },
    {
      id: 4,
      title: '',
      text: '审核通过之后，到【客易达后台-渠道配置-消息存档】中联系客服开通',
      isTwoImg: true
    }
  ])

  const secondData = reactive([
    {
      id: 5,
      title: '二、配置新域名及设置开启范围',
      text: '在企微端配置可信IP地址，',
      text2: route.query.ip,
      showbtn: true
    },
    {
      id: 6,
      title: '',
      text: '设置会话内容的开启范围'
    }
  ])

  const thirdData = reactive([
    {
      id: 7,
      title: '三、填写Secret',
      text: '企微端获取Secret信息'
    },
    {
      id: 8,
      title: '',
      text: '客易达后台填写Secret'
    }
  ])

  const changeActive = () => {
    active.value++
    switch (active.value) {
      case 0:
        break
      case 1:
        resData.value = secondData
        break
      case 2:
        resData.value = thirdData
        break
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    // margin: 0 auto;
    // padding: 30px 0;
    background: #fbfbfb;
    .backtype {
      background: #ffffff;
      box-shadow: 0px 4px 4px 0px rgba(240, 240, 240, 0.5);
      border-radius: 1px;
      border: 1px solid #eaeaea;
      padding: 20px;
      .steps {
        display: flex;
        .step_line {
          position: relative;
          width: 300px;
          height: 30px;
          line-height: 30px;
          margin-right: 30px;
          color: #333333;
          font-weight: 600;
          &:not(.step_line:last-child)::after {
            content: '';
            width: 180px;
            top: 50%;
            position: absolute;
            border-top: 1px dashed #ffc69e;
          }
          &.success {
            color: #ff6b00;
            .step_line_icon i {
              background-color: #ff6b00;
              color: #ffffff;
            }
          }
          .step_line_icon {
            margin: 0 10px;
            i {
              width: 30px;
              height: 30px;
              border-radius: 50%;
              background-color: #eaeaea;
              display: inline-block;
              text-align: center;
            }
            img {
              vertical-align: middle;
            }
          }
        }
      }
    }

    :deep .el-step__head.is-process {
      // border-color:
      border-color: var(--el-text-color-placeholder);
      color: var(--el-text-color-placeholder);
    }
    :deep .el-step__description.is-process {
      color: var(--el-text-color-placeholder);
    }
  }
</style>

<style lang="scss">
  .steps {
    .el-step__head {
      margin-bottom: 20px;
    }
  }
</style>
